<template>
	<view class="content">
		<view class="list">
			<view class="list_tit">
				<text>按购买课时结课</text>
			</view>
			<view class="list1" v-for="(item,index) in list">
				<view class="list1_t">
					<text>姓名{{item.name}}</text> <text>姓名XXXX</text>
				</view>
				<view class="list1_b">
					<view class="list1_b_1">
						退课课时：<text>{{item.tk}}</text>
					</view>
					<view class="list1_b_1">
						总课时：<text>{{item.zks}}</text>
					</view>
					<view class="list1_b_1">
						结课课时：<text>{{item.jk}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list_tit">
				<text>全额退款</text>
			</view>
			<view class="list1" v-for="(item,index) in list">
				<view class="list1_t">
					<text>姓名{{item.name}}</text> <text>姓名XXXX</text>
				</view>
				<view class="list1_b">
					<view class="list1_b_1">
						退课课时：<text>{{item.tk}}</text>
					</view>
					<view class="list1_b_1">
						总课时：<text>{{item.zks}}</text>
					</view>
					<view class="list1_b_1">
						结课课时：<text>{{item.jk}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list_tit">
				<text>按指定课时结课 其余课时退款</text>
			</view>
			<view class="list1" v-for="(item,index) in list">
				<view class="list1_t">
					<text>姓名{{item.name}}</text> <text>姓名XXXX</text>
				</view>
				<view class="list1_b">
					<view class="list1_b_1">
						退课课时：<text>{{item.tk}}</text>
					</view>
					<view class="list1_b_1">
						总课时：<text>{{item.zks}}</text>
					</view>
					<view class="list1_b_1">
						结课课时：<text>{{item.jk}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			
			<view class="bot1">
				<view class="bot1_1">
					总共：<text>10</text>人
				</view>
				<view class="bot1_1">
					总课时数：<text>10</text>人
				</view>
				<view class="bot1_1">
					结算课时：<text>10</text>人
				</view>
				<view class="bot1_1">
					退课课时：<text>10</text>人
				</view>
			</view>
			
			<view class="bot2">
				<view class="bot2_bt1">
					<button type="default">拒绝</button>
				</view>
				<view class="bot2_bt2">
					<button type="default">同意</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 0,
						name: 'XXXX',
						tk: 4,
						zks: 4,
						jk: 4
					},
					{
						id: 0,
						name: 'XXXX',
						tk: 4,
						zks: 4,
						jk: 4
					},
					{
						id: 0,
						name: 'XXXX',
						tk: 4,
						zks: 4,
						jk: 4
					},
					{
						id: 0,
						name: 'XXXX',
						tk: 4,
						zks: 4,
						jk: 4
					}

				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		width: 750rpx;
		height: 3116rpx;
		background: #FAFAFA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding-top: 32rpx;
	}

	.list {
		width: 690rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(226, 226, 226, 0.2);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin: 0 auto 40rpx;
		padding-top: 32rpx;
	}

	.list_tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-left: 32rpx;
	}

	.list1 {
		width: 626rpx;
		height: 164rpx;
		background: #F6FCFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		padding-top: 32rpx;
		margin: 16rpx auto 0;
	}

	.list1_t {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-left: 32rpx;
	}

	.list1_t text {
		margin-right: 56rpx;
	}

	.list1_b {
		margin-top: 24rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
	}

	.list1_b_1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;

	}

	.list1_b_1 text {
		font-family: PingFang SC-Medium;
		font-weight: Medium;
		font-size: 32rpx;
		color: #1789FF;
	}

	.list1_b {
		display: flex;
		justify-content: space-between;
	}

	.bottom {
		width: 750rpx;
		height: 302rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: sticky;
		bottom: 0;
		margin-top: 40rpx;
	}
	.bot1{
		display: flex;
		flex-wrap: wrap;
		margin-left: 32rpx;
		margin-right: 32rpx;
		padding-top: 8rpx;
	}
	.bot1_1{
		width: 50%;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-top: 24rpx;
	}
	.bot1_1 text{
		font-family: PingFang SC-Medium;
		font-weight: Medium;
		font-size: 28rpx;
		color: #1789FF;
	}
	.bot2{
		display: flex;
		margin-top: 24rpx;
	}
	.bot2_bt1{
		margin: auto;
	}
	.bot2_bt1 button{
		width: 332rpx;
		background: #FFFFFF;
		height: 88rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 2rpx solid #409CFD;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #409CFD;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bot2_bt2{
		margin: auto;
	}
	.bot2_bt2 button{
		width: 332rpx;
		height: 88rpx;
		background: #409CFD;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;display: flex;
		align-items: center;
		justify-content: center;
	}
</style>